<template>
	<view>
		<view class="breadcrumbs" @click="showMenu = true">
			<view class="left">
				<view v-for="(item,index) in selectedInfo" :key="index">
					<block v-if="index > 0">/</block>
					<text>{{item.title}}</text>
				</view>
			</view>
			<u-icon name="arrow-right" />
		</view>

		<u-popup v-model="showMenu">
			<view class="popup-inner">
				<view class="menu-wrap">
					<block v-for="firstItem in menuData" :key="firstItem.key">
						<view class="first">
							<u-icon name="grid"></u-icon>
							<text class="title">{{firstItem.title}}</text>
						</view>
						<block v-for="secondItem in firstItem.children" :key="secondItem.key">
							<view class="second">
								<u-icon name="home"></u-icon>
								<text class="title">{{secondItem.title}}</text>
							</view>
							<block v-for="thirdItem in secondItem.children" :key="thirdItem.key">
								<view class="third" @click="selectDevice(firstItem,secondItem,thirdItem)">
									<u-icon name="wifi-off" color="red" size="36"
										v-if="thirdItem.slots.icon == 'person_lx'" />
									<u-icon name="wifi" color="green" size="36" v-else />
									<text class="title">{{thirdItem.title}}</text>
								</view>
							</block>
						</block>
					</block>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				windowHeight: 0,
				showMenu: false,
				menuData: null,
				selectedInfo: []
			}
		},
		beforeMount() {
			this.windowHeight = this.$u.sys().windowHeight
			this.loadMenu()
		},
		methods: {
			loadMenu() {
				let that = this
				this.$u.api.getMenu().then(res => {
					if (res.success) {
						that.menuData = res.result
						if (that.menuData.length > 0) {
							//默认第一个
							let org = that.menuData[0]
							that.selectedInfo = [org]
							if (org.children.length > 0) {
								let mine = org.children[0]
								that.selectedInfo.push(mine)
								if (mine.children.length > 0) {
									let device = mine.children[0]
									that.selectedInfo.push(device)
									that.$u.vuex("vuex_device", device)
								}
							}
						}
					} else {
						// that.$u.toast("获取机构树失败：" + res.message)
					}
				}).catch(e => {
					// console.error(e)
					that.$u.toast("获取机构树异常")
				})
			},
			selectDevice(mineInfo, deptInfo, deviceInfo) {
				console.log(deviceInfo)
				this.selectedInfo = [mineInfo, deptInfo, deviceInfo]
				this.$u.vuex("vuex_device", deviceInfo)
				this.showMenu = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.breadcrumbs {
		background-color: #277500;
		font-size: 30upx;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		min-height: 60upx;
		padding: 20upx 20upx;

		.left {
			font-weight: bold;
			display: flex;
			flex-wrap: wrap;
		}
	}

	.popup-inner {
		height: 100vh;
		padding-top: 80upx;

		.menu-wrap {
			padding: 0 40upx;
			font-size: 30upx;

			.title {
				margin-left: 10upx;
			}

			.first {
				color: #333;
				padding: 20upx 0;
			}

			.second {
				color: #333;
				padding-left: 20upx;
				padding: 20upx 0 20upx 40upx;
			}

			.third {
				color: #333;
				padding: 20upx 0 20upx 80upx;
			}
		}
	}
</style>
